import React from 'react';

import { RingProgress } from '@ant-design/charts';

import styles from './asset2.css';

export interface Asset2Props {
  percent?: number;
  count?: number;
  title?: string;
  unit?: string;
  type?: string;
  color?: string;
}

export class Asset2 extends React.Component<Asset2Props, {}> {
  static defaultProps = {
    percent: 0,
    count: '-',
    title: '-',
    unit: '-',
    type: '-',
    color: 'rgb(109,196,202)'
  };

  constructor(props: Asset2Props) {
    super(props);
  }

  config = () => {
    return {
      height: 100,
      width: 100,
      autoFit: false,
      percent: this.props.percent || 0,
      progressStyle: (params: any) => {
        if (params.type === 'current') {
          return { fill: 'l(0) 0:rgb(111, 217, 200) 1:rgb(58,127,213)' };
        }
        return {
          fill: '#999',
          lineDash: [1, 1],
          stroke: '#333',
        };
      },
    };
  };

  render() {
    const { count, title, unit, type, color } = this.props;

    return (
      <div className={styles.percent}>
        <div className={styles.title}>{title}</div>
        <div className={styles.subTitle}>
          <div className={styles.number} style={{color}}>{count?.toLocaleString()}</div>
          <div className={styles.unit}>{unit}</div>
        </div>
        <RingProgress {...this.config()} className={styles.percentCenter}></RingProgress>
        <div className={styles.titleBottom}>{type}</div>
      </div>
    );
  }
}
